import React, { useMemo } from "react"
import PropTypes from "prop-types"
import { h0 } from "../common/fp"
import dayjs from "dayjs"
import "./DepartDate.css"

export default function DepartDate(props) {
  const { time, onClick } = props

  const h0OfDepart = h0(time)
  const departDate = new Date(h0OfDepart)

  const departDateString = useMemo(() => {
    return dayjs(h0OfDepart).format("YYYY-MM-DD")
  }, [h0OfDepart])

  const isToday = h0OfDepart === h0()

  const weekString =
    "周" +
    ["日", "一", "二", "三", "四", "五", "六"][departDate.getDay()] +
    (isToday ? "(今天)" : "")

  return (
    <div className="depart-date" onClick={onClick}>
      <input type="hidden" name="date" value={departDateString} />{" "}
      {departDateString} <span className="depart-week"> {weekString} </span>{" "}
    </div>
  )
}

DepartDate.propTypes = {
  time: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired,
}
